const path = require("path")

//在内存中生成html页面插件
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


//这个配置文件，起始就是一个 JS 文件，通过 Node 中的模块操作，向外暴露了一个 配置对象
module.exports = {


    entry: path.join(__dirname, './src/index.js'), //入口，表示要打包的文件,
    output: { //输出文件相关配置
        path: path.join(__dirname, "./dist/"),
        filename: 'main.js' //指定输出文件名称
    },
    plugins: [
        new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
            template: path.join(__dirname, './src/index.html'),
            //指定模版页面，将来会根据制定页面路径，去生成内存中的页面
            filename: 'index.html' //指定生成页面名称
        }),
        new VueLoaderPlugin()
    ],
    module: { //这个节点用于配置所有第三方模块加载器
        rules: [ //所有第三方模块加载器规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }, // 处理 less 文件的 loader
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, // 处理 scss 文件的 loader
            {
                test: /\.(jpg|png|gif|bmp|jpeg)$/,
                use: [{
                    loader: 'url-loader?name=[hash:8]-[name].[ext]',
                    options: {
                        esModule: false
                    }
                }]
            },
            { // 处理 字体文件的 loader 
                test: /\.(woff|woff2|svg|ttf|eot)$/,
                use: 'url-loader'
            },

            //这是配置babel转换高级语法的
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }, //处理vue的loader
           








        ]

    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.js"
        }
    }
}